<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表页</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--<script>
        function validateForm(){
            let x = document.forms["input"]["name"].value;
            let y = document.forms["input"]["author"].value;
            let z = document.forms["input"]["press"].value;
            let num = document.forms["input"]["number"].value;
            let file = document.forms["input"]["img"].value;
            if (x==null || x === ""){
                alert("图书名称不能为空");
                return false;
            }
            if (y==null || y === ""){
                alert("作者不能为空");
                return false;
            }
            if (z==null || z === ""){
                alert("出版社不能为空");
                return false;
            }
            if (num==null || num === ""){
                alert("库存数量不能为空");
                return false;
            }
            if (num<=0){
                alert("库存数量需要大于等于0");
                return false;
            }
            if (file==null || file === ""){
                 alert("未上传图书封面图片");
                 return false;
            }
            alert("提交成功！");
        }
    </script>-->
</head>
<body>
<div class="container">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="list.html" th:href="@{/book/list}">首页</a></li>
        <li class="breadcrumb-item active">上传</li>
    </ol>
    <form name="input" action="/book/add" method="post" th:action="@{/book/add}" enctype="multipart/form-data">
        <div class="form-group">
            <label for="name">图书名称</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入名称" required>
        </div>
        <div class="form-group">
            <label for="author">作者</label>
            <input type="text" class="form-control" id="author" name="author" placeholder="请输入作者" required>
        </div>
        <div class="form-group">
            <label for="press">出版社</label>
            <input type="text" class="form-control" id="press" name="press" placeholder="请输入出版社" required>
        </div>
        <div class="form-group">
            <label for="date">出版日期</label>
            <!-- readonly代表是否为禁用输入 -->
            <input type="text" id="date" name="date" class="form-control" value="请选择日期" readonly required>
        </div>
        <div class="form-group">
            <label for="number">库存数量</label>
            <input type="number" class="form-control" id="number" name="number" placeholder="请输入数量" required>
        </div>
        <div class="form-group">
            <label for="img">选择图书封面图片</label><br>
            <input type="file" id="img" name="img" required>
        </div> <br>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>
<script type="text/javascript">
    /* 初始化插件  */
    $(function () {
        $("#date").datetimepicker({
            forceParse: 0,//设置为0，时间不会跳转，会显示当前时间。
            format: 'yyyy-mm-dd', // 展现格式
            initialDate: new Date(),//初始化当前日期
            autoclose: true, // 选择日期后关闭
            // 选择器打开之后首先显示的视图
            // 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
            startView: 4,
            // 选择器所能够提供的最精确的时间选择视图
            // 0表示分钟(默认),1表示小时,2表示天,3表示月,4表示年
            minView: 2,
            language: 'zh-CN', //显示语言为中文
            todayBtn: true, //显示今日按钮
            todayHighlight: 1,
            //endDate : new Date(),
        });
        $("#date").datetimepicker("setDate", new Date());  //设置显示默认当天的时间
        $('#date').datetimepicker('setEndDate', new Date());

        // $('#img').change(function(event) {
        //     var files = event.target.files, file;
        //     if (files && files.length > 0) {
        //         file = files[0];
        //         var URL = window.URL || window.webkitURL;
        //         var imgURL = URL.createObjectURL(file);
        //         $('#img').prev().find("img").attr('src', imgURL);
        //     }
        // });
    });

</script>
</body>
</html>


